<html>

<head>
    <link rel="stylesheet" href="../../normalize.css">
    <link rel="stylesheet" href="../../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="example">
        <div id="demo">{{ fullName }}</div>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#demo',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
            },
            computed: {
                fullName: {
                    // getter
                    get: function () {
                        return this.firstName + ' ' + this.lastName
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.firstName = names[0]
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        });
        vm.fullName = 'John Doe'
    </script>
</body>

</html>